<!--
 * @LastEditTime: 2019-11-02 18:31:25
 -->
<template>
  <div
    class="right-menu-list"
    ref="rightMenus"
    :style="{left:rightMenuPosition.x+'px',top:menuTop+'px'}"
  >
    <customMenuItem
      :menuData="rightMenu"
      @list="handleMethod"
    ></customMenuItem>
  </div>
</template>
<script>
/**
 * @menuData 树结构数组对象
 * 组件暂存缺陷：1.鼠标悬浮显示、离开就只显示主面板  2.显示边缘地带没有适配换方位显示
 * li 上添加 is-disabled 代表禁用
 * */
import customMenuItem from "./item";
import rightMenuMixin from "../rightMenuMixin";
export default {
  name: "rightClickMenu",
  data() {
    return {
      menuTop: 0,
      isDel: true,
      debounceItemDel: null,
    };
  },
  components: {
    customMenuItem,
  },
  mounted() {
    this.init();
    this.debounceItemDel = this.debounceFun(this.handleItemDel, 500);
  },
  mixins: [rightMenuMixin],
  methods: {
    //初始化
    init() {
      // 右键菜单高度
      let bodyHeight = document.body.offsetHeight; // body高度
      let menuHeight = this.$refs.rightMenus.offsetHeight; //菜单高度
      let yPosition = this.rightMenuPosition.y; //右键点击的位置
      if (bodyHeight - yPosition > menuHeight) {
        this.menuTop = yPosition;
      } else {
        this.menuTop = bodyHeight - menuHeight;
      }
    },
    //事件执行函数
    handleMethod(method, param, arr) {
      this.rightClickMenu = false;
      if (!method) return console.log("当前未绑定任何事件");
      this[method](param, arr);
    },
    handleItemData(param) {
      this.isRightClickMenu = false;
      console.log(this.selectMenuTtem);
      console.log(param);
    },
    addMenuChild(item) {
      this.$emit("addMenuChild", item);
    },
    async handleItemDel(item) {
      let res = await this.$http.delete(
        `/dictionary/delete?modelName=${item.modelName}&reference=${item.reference}&nodeId=${item.nodeId}`
      );
      if (res.code == 200) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.$emit("init");
      }
      this.isRightClickMenu = false;
    },
  },
};
</script>

<style lang="scss">
.right-menu-list {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 160px;
  z-index: 1000;
  color: #000;
  ul {
    background-size: 100% 100%;
    font-size: 12px;
    margin-left: 5px;
    padding-left: 0;
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    background: #ffffff;
  }
  li {
    position: relative;
    line-height: 26px;
    padding: 0 12px;
    cursor: pointer;
    user-select: none;
    .trans-left {
      transform: rotate(180deg);
    }
    .el-icon-arrow-right {
      transition: 0.2s;
    }
    &:hover {
      background: rgba(33, 150, 243, 0.62);
    }
    &:after {
      content: "";
      display: table;
      width: 100%;
    }
    &.is-disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background: none !important;
      pointer-events: unset; // 如果禁用按钮需要设置事件， 不要开启这个按钮
    }
    ul {
      position: absolute;
      left: 100%;
      top: 0;
      width: 180px;
      // display: none;
    }
    i {
      line-height: 30px;
    }
  }
}
</style>